<template>
	<div class="addPatient">
		<el-form :model="ruleForm" class="demo-ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
			<h1 class="record">
				新建患者档案:
			</h1>
			<br><br>
			<div>
				<el-form-item label="患者姓名" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="患者来源" prop="region">
					<el-select v-model="ruleForm.region" placeholder="请选择患者来源">
						<el-option label="挂号" value="挂号"></el-option>
						<el-option label="门诊" value="门诊"></el-option>
						<el-option label="急诊" value="急诊"></el-option>
						<el-option label="化验" value="化验"></el-option>
						<el-option label="手术" value="手术"></el-option>
						<el-option label="住院" value="住院"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="身份证号" prop="idCard">
					<el-input v-model="ruleForm.idCard"></el-input>
				</el-form-item>
			</div>
			<div>
				<el-form-item label="患者年龄" prop="age">
					<el-input v-model.number="ruleForm.age"></el-input>
				</el-form-item>
				<el-form-item label="患者性别" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio :label="1" label-width="150px">男</el-radio>
						<el-radio :label="2" label-width="150px">女</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
			<div>
				<el-form-item label="家庭地址">
					<el-select v-model="selectProvince1" placeholder="选择省份">
						<el-option v-for="item in provinces" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
					<el-select v-model="selectCity1" placeholder="选择城市份">
						<el-option v-for="item in citys" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
					<el-input v-model="ruleForm.address" placeholder="更加详细地址" label-width:200px></el-input>
				</el-form-item>
			</div>
			<br>
			<h3>联系人资料</h3><br>
			<div>
				<el-form-item label="联系人姓名" prop="familyName">
					<el-input v-model="ruleForm.familyName"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model.number="ruleForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="与患者关系" prop="relation">
					<el-select v-model="ruleForm.relation" placeholder="与患者关系">
						<el-option label="父子" value="父子"></el-option>
						<el-option label="父女" value="父女"></el-option>
						<el-option label="母子" value="母子"></el-option>
						<el-option label="母女" value="母女"></el-option>
						<el-option label="兄弟" value="兄弟"></el-option>
						<el-option label="姐妹" value="姐妹"></el-option>
						<el-option label="亲戚" value="亲戚"></el-option>
						<el-option label="朋友" value="朋友"></el-option>
						<el-option label="监护人" value="监护人"></el-option>
						<el-option label="其他" value="其他"></el-option>
					</el-select>
				</el-form-item>
			</div>
			<div>
				<el-form-item label="目前身体状况" prop="symptoms">
					<el-input type="textarea" v-model="ruleForm.symptoms"></el-input>
				</el-form-item>
			</div>
			<div>
				<h3>是否有病史？如果有，请简单说明</h3><br>
				<el-form-item label="病史简单说明" prop="illHistory">
					<el-input type="textarea" v-model="ruleForm.illHistory"></el-input>
				</el-form-item>
			</div>
			<div>
				<h3>医生信息</h3>
				<el-form-item label="姓名" prop="doctor">
					<el-select style="width: 130px" placeholder="必填" v-model="ruleForm.doctor"
						@change="handleSelectChange">
						<el-option v-for="item in shiftListNurse" :key="item.id"
							:label="item.name + ' ' + item.id + ' ' + item.office" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="科室" prop="disease">
					：{{ ruleForm.disease }}
				</el-form-item>
			</div>
			<div>
				<el-form-item class="center">
					<el-button type="primary" @click="onSubmit">立即创建</el-button>
					<el-button @click="offReset('ruleForm')">重置</el-button>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>
<script type="text/ecmascript-6">
	import {
		api
	} from '../../../global/api.js';
	export default {
		data() {
			//正则验证
			let checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('年龄不能为空'));
				};
				setTimeout(() => {
					if (/^\d+$/.test(value) === false) {
						callback(new Error('请输入数字值'));
					} else {
						callback();
					}
				}, 300);
			};
			var checkName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('姓名不能为空'));
				} else {
					callback();
				}
			};
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('电话不能为空'));
				};
				setTimeout(() => {
					if (/^\d+$/.test(value) === false) {
						callback(new Error('请输入数字值'));
					} else if (value.length > 11) {
						callback(new Error('请输入正确号码'));
					} else {
						callback();
					}
				}, 500);
			};
			var checkidCard = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('身份证号不能为空'));
				};
				setTimeout(() => {
					if (/^(\w){6,20}$/.test(value) === false) {
						callback(new Error('请输入正确身份证号码'));
					} else {
						callback();
					}
				}, 500);
			};
			return {//患者信息
				ruleForm: {
					name: '',
					sex: 1,
					region: '',
					familyName: '',
					phone: '',
					relation: '',
					illHistory: '',
					idCard: '',
					age: '',
					symptoms: '',
					disease: '',
					position: '',
					address: '',
					doctor: ''
				},
				provinces: [],//省份
				citys: [],//市区
				shiftListNurse: [],//医生信息
				department: [],//科室信息
				selectProvince1: '',
				selectCity1: '',
				rules: {
					name: [{
						required: true,
						validator: checkName,
						trigger: 'blur'
					}],
					age: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						validator: checkPhone,
						trigger: 'blur'
					}],
					region: [{
						required: true,
						trigger: 'blur'
					}],
					idCard: [{
						required: true,
						validator: checkidCard,
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						trigger: 'blur'
					}]
				}
			};
		},
		mounted() {
			//获取所有省份
			let me = this;
			let apilogin = "http://localhost:8088/getAllProvinces"
			this.$http.get(apilogin).then(function(response) {
				console.log(response.body);
				me.provinces = response.body.data.list;
			}, function() {
				that.$message.error('数据获取失败!');
			});
		},
		methods: {
			onSubmit() {//新增表单提交
				console.log('您修改后的参数为：', JSON.stringify(this.ruleForm));
				let that = this;

				let apilogin = "http://localhost:8088/insertPatientlist"
				this.$http.post(apilogin, this.ruleForm).then(function(response) {
					console.log(response.body);
					that.$message.success('数据新增成功!');
				}, function() {
					that.$message.error('数据新增失败!');
				});

			},
			offReset(form) {//重置
				this.$refs[form].resetFields();
				this.ruleForm.date = '';
				this.ruleForm.address = '';
				this.selectProvince1 = '';
				this.selectCity1 = '';
			},
			handleSelectChange(selectedId) {//选择医生信息变化时
				const selectedNurse = this.shiftListNurse.find(nurse => nurse.id === selectedId);
				if (selectedNurse) {
					this.ruleForm.doctor = selectedNurse.name;
					this.ruleForm.disease = selectedNurse.office;
				}
				const department = this.department.find(nurse => nurse.text === this.ruleForm.disease);
				if (department) {
					this.ruleForm.position = department.position;
				}
			}
		},
		watch: {
			selectProvince1: function() {//省份变化时
				let me = this;
				let apilogin = "http://localhost:8088/getCitiesByid/" + this.selectProvince1
				this.$http.get(apilogin).then(function(response) {
					//显示当前省份的市区
					me.citys = response.body.data.list;
				}, function() {
					that.$message.error('数据获取失败!');
				});
			}
		},
		created() {
			// 获取医生
			let that = this;
			let API = "http://localhost:8088/getDoctor";
			this.$http.get(API, {
				params: {
					"pageNum": 1,
					"pageSize": 10000,
					"search": ''
				}
			}).then((response) => {
				for (var i = 0; i < response.body.data.length; i++) {
					that.shiftListNurse[i] = {
						id: response.body.data[i].id,
						name: response.body.data[i].name,
						office: response.body.data[i].office
					};
				}
				console.log(that.shiftListNurse);
			}, response => {
				this.$message({
					message: '数据请求失败',
					type: 'error'
				});
			});
			
			//获取科室
			API = "http://localhost:8088/getAllDepartment";
			this.$http.get(API).then((response) => {
				for (var i = 0; i < response.body.length; i++) {
					that.department[i] = {
						text: response.body[i].text,
						position: response.body[i].position
					};
				}
				console.log(that.department);
			}, response => {
				this.$message({
					message: '数据请求失败',
					type: 'error'
				});
			});
		}
	};
</script>
<!-- <script src="https://unpkg.com/vue"></script> -->
<style type="text/css">
	.addPatient .el-input,
	.addPatient .el-input__inner {
		display: inline-block;
		width: 192px;
	}

	.addPatient {
		margin: 0 200px;
	}

	.addPatient .el-form-item {
		padding-right: 30px;
	}

	.addPatient .el-form {
		padding-bottom: 20px;
	}

	.addPatient .el-textarea__inner {
		width: 500px;
	}

	.addPatient .center {
		padding-left: 200px;
	}

	.addPatient .demonstration {
		color: #333;
		font-size: 24px;
	}

	.addPatient .record {
		font-size: 28px;
	}

	.addPatient .el-form-item {
		display: inline-block;
	}
</style>